﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Element/Element.Dimensions</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:scrollTo">scrollTo</a></div>
			<div class="menu-item"><a href="#Element:getSize">getSize</a></div>
			<div class="menu-item"><a href="#Element:getScrollSize">getScrollSize</a></div>
			<div class="menu-item"><a href="#Element:getScroll">getScroll</a></div>
			<div class="menu-item"><a href="#Element:getPosition">getPosition</a></div>
			<div class="menu-item"><a href="#Element:setPosition">setPosition</a></div>
			<div class="menu-item"><a href="#Element:getCoordinates">getCoordinates</a></div>
			<div class="menu-item"><a href="#Element:getOffsetParent">getOffsetParent</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Custom Type to allow all of its methods to be used with any DOM element via the dollar function <a href="Element.html#Window:dollar">$</a>.</p>

<h3>Notes:</h3>

<ul>
<li>These methods don't take into consideration the body element margins and borders. If you need margin/borders on the body, consider adding a wrapper div, but always reset the margin and borders of body to 0.</li>
<li>If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use <a href="../../more/Element/Element.Measure.html">Element.measure</a> to expose it.</li>
</ul>
<h3>Credits:</h3>

<ul>
<li>Element positioning based on the <a href="http://qooxdoo.org/">qooxdoo</a> code and smart browser fixes, <a href="http://www.gnu.org/licenses/lgpl.html">LGPL License</a>.</li>
<li>Viewport dimensions based on <a href="http://developer.yahoo.com/yui/">YUI</a> code, <a href="http://developer.yahoo.com/yui/license.html">BSD License</a>.</li>
</ul>
<h2 id="Element:scrollTo"><a href="#Element:scrollTo">Element Method: scrollTo</a></h2>

<p class="description">Scrolls the element to the specified coordinated (if the element has an overflow).
The following method is also available on the Window object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">scrollTo</span><span class="br0">(</span>x, y<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>x - (<em>number</em>) The x coordinate.</li>
<li>y - (<em>number</em>) The y coordinate.</li>
</ol>
<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">scrollTo</span><span class="br0">(</span><span class="nu0">0</span>, <span class="nu0">100</span><span class="br0">)</span>;
</pre>

<h3>See Also:</h3>

<ul>
<li>
<a href="https://developer.mozilla.org/en/DOM/element.scrollLeft">MDC Element:scrollLeft</a>, <a href="https://developer.mozilla.org/en/DOM/element.scrollTop">MDC Element:scrollTop</a>
</li>
</ul>
<h2 id="Element:getSize"><a href="#Element:getSize">Element Method: getSize</a></h2>

<p class="description">Returns the height and width of the Element, taking into account borders and padding.
The following method is also available on the Window object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">getSize</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An object containing the width (as x) and the height (as y) of the target Element.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> size = myElement.<span class="me1">getSize</span><span class="br0">(</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">'The element is '</span> + size.<span class="me1">x</span> + <span class="st0">' pixels wide and '</span> + size.<span class="me1">y</span> + <span class="st0">'pixels high.'</span><span class="br0">)</span>;
</pre>

<h3>Note:</h3>

<p>If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use <a href="../../more/Element/Element.Measure.html">Element.measure</a> to expose it.</p>

<h2 id="Element:getScrollSize"><a href="#Element:getScrollSize">Element Method: getScrollSize</a></h2>

<p class="description">Returns an Object representing the size of the target Element, including scrollable area.
The following method is also available on the Window object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">getScrollSize</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An object containing the x and y dimensions of the target Element.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> <span class="kw3">scroll</span> = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getScrollSize</span><span class="br0">(</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">'My element can scroll to '</span> + <span class="kw3">scroll</span>.<span class="me1">y</span> + <span class="st0">'px'</span><span class="br0">)</span>; <span class="co1">// alerts 'My element can scroll down to 820px'</span>
</pre>

<h3>See Also:</h3>

<ul>
<li>
<a href="https://developer.mozilla.org/en/DOM/element.scrollLeft">MDC Element:scrollLeft</a>, <a href="https://developer.mozilla.org/en/DOM/element.scrollTop">MDC Element:scrollTop</a>, <a href="https://developer.mozilla.org/en/DOM/element.offsetWidth">MDC Element:offsetWidth</a>, <a href="https://developer.mozilla.org/en/DOM/element.offsetHeight">MDC Element:offsetHeight</a>, <a href="https://developer.mozilla.org/en/DOM/element.scrollWidth">MDC Element:scrollWidth</a>, <a href="https://developer.mozilla.org/en/DOM/element.scrollHeight">MDC Element:scrollHeight</a>
</li>
</ul>
<h3>Note:</h3>

<p>If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use <a href="../../more/Element/Element.Measure.html">Element.measure</a> to expose it.</p>

<h2 id="Element:getScroll"><a href="#Element:getScroll">Element Method: getScroll</a></h2>

<p class="description">Returns an Object representing how far the target Element is scrolled in either direction.
The following method is also available on the Window object.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">getScroll</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An object containing the x and y dimensions of the target Element's scroll.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> <span class="kw3">scroll</span> = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getScroll</span><span class="br0">(</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">'My element is scrolled down '</span> + <span class="kw3">scroll</span>.<span class="me1">y</span> + <span class="st0">'px'</span><span class="br0">)</span>; <span class="co1">// alerts 'My element is scrolled down to 620px'</span>
</pre>

<h3>Note:</h3>

<p>If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use <a href="../../more/Element/Element.Measure.html">Element.measure</a> to expose it.</p>

<h2 id="Element:getPosition"><a href="#Element:getPosition">Element Method: getPosition</a></h2>

<p class="description">Returns the real offsets of the element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">getPosition</span><span class="br0">(</span>relative<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<p>relative - (Element, defaults to the document) If set, the position will be relative to this Element.</p>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An object with the x and y coordinates of the Element's position.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'element'</span><span class="br0">)</span>.<span class="me1">getPosition</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// returns {x: 100, y: 500};</span>
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="http://www.quirksmode.org/js/findpos.html">QuirksMode: Find position</a></li>
</ul>
<h3>Note:</h3>

<p>If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use <a href="../../more/Element/Element.Measure.html">Element.measure</a> to expose it.</p>

<h2 id="Element:setPosition"><a href="#Element:setPosition">Element Method: setPosition</a></h2>

<p class="description">Sets the position of the element's <em>left</em> and <em>top</em> values to the x/y positions you specify.</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">setPosition</span><span class="br0">(</span>positions<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>positions - (<em>object</em>) an object with x/y values (integers or strings, i.e. 10 or "10px")</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) the element that is positioned.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">myElement.<span class="me1">setPosition</span><span class="br0">(</span><span class="br0">{</span>x: <span class="nu0">10</span>, y: <span class="nu0">100</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Element:getCoordinates"><a href="#Element:getCoordinates">Element Method: getCoordinates</a></h2>

<p class="description">Returns an object with width, height, left, right, top, and bottom coordinate values of the Element.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">getCoordinates</span><span class="br0">(</span>relative<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<p>relative - (<em>element</em>, optional) if set, the position will be relative to this element, otherwise relative to the document.</p>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) An object containing the Element's current: top, left, width, height, right, and bottom.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript"><span class="kw2">var</span> myValues = $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getCoordinates</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h4>Returns:</h4>

<pre class="javascript"><span class="br0">{</span>
    top: <span class="nu0">50</span>,
    left: <span class="nu0">100</span>,
    width: <span class="nu0">200</span>,
    height: <span class="nu0">300</span>,
    right: <span class="nu0">300</span>,
    bottom: <span class="nu0">350</span>
<span class="br0">}</span>
</pre>

<h3>See Also:</h3>

<p><a href="#Element:getPosition">Element:getPosition</a></p>

<h3>Note:</h3>

<p>If you need to measure the properties of elements that are not displayed (either their display style is none or one of their parents display style is none), you will need to use <a href="../../more/Element/Element.Measure.html">Element.measure</a> to expose it.</p>

<h2 id="Element:getOffsetParent"><a href="#Element:getOffsetParent">Element Method: getOffsetParent</a></h2>

<p class="description">Returns the parent of the element that is positioned, if there is one.</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">getOffsetParent</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>mixed</em>) If the element has a parent that is positioned, it returns that element, otherwise it returns <em>null</em>.</li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
